<template>
  <div class="guide-link">
    <PageTable :loading="loading" :columns="columns" :data="dataSource" />

    <Pagination
      v-show="total > 0"
      :total="total"
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import Clipboard from 'clipboard'
export default {
  name: 'GuideLink',
  data() {
    return {
      loading: true,
      total: 10,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      columns: [
        {
          label: '页面名称',
          prop: 'title'
        },
        {
          label: '页面路径',
          minWidth: '140px',
          render: (h, { row }) => {
            return (
              <div style={'display: flex;justify-content: space-between;align-items: center;'}>
                <span style={'dispaly: flex;flex: 1'}>{row.jumpUrl}</span>
                <span
                  class={'copy-text'}
                  data-clipboard-action="copy"
                  onClick={() => this.copyCode(row.jumpUrl)}
                >
                  复制
                </span>
              </div>
            )
          }
        },
        {
          label: '指向位置',
          render: (h, { row }) => {
            return <span>{this.pointPlace(row.pointPlace)}</span>
          }
        },
        {
          label: '启用状态',
          render: (h, { row }) => {
            return <span>{row.isShow ? '启用' : '隐藏'}</span>
          }
        },
        {
          label: '创建时间',
          prop: 'createdTime'
        },
        {
          label: '操作',
          render: (h, { row }) => {
            return (
              <div>
                <el-button type="text" onClick={() => this.edit(row.id)}>
                  编辑
                </el-button>
                {row.isShow ? (
                  <el-button type="text" onClick={() => this.updateStatusHide(row.id)}>
                    隐藏
                  </el-button>
                ) : (
                  <span>
                    <el-button
                      class="ml-5"
                      type="text"
                      onClick={() => this.updateStatusShow(row.id)}
                    >
                      启用
                    </el-button>
                    <Popconfirm
                      text={'确定进行删除？如短信已有发出，删除后页面无法访问。请谨慎操作！'}
                      confirm={() => this.delete(row.id)}
                    >
                      <el-button type="text" class="ml-5">
                        删除
                      </el-button>
                    </Popconfirm>
                  </span>
                )}
              </div>
            )
          }
        }
      ],
      dataSource: []
    }
  },
  computed: {
    pointPlace() {
      return pointPlace => {
        const list = [
          { value: 0, label: '不指定' },
          { value: 1, label: '栏目' },
          { value: 2, label: '设备' },
          { value: 3, label: '门店' }
        ]
        let labels = list.find(item => pointPlace === item.value)
        return labels && labels.label
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const {
        data: { records, total }
      } = await this.$http.message.guideApi.getList({ params: { ...this.listQuery } })
      this.total = total
      this.dataSource = records
      this.loading = false
    },
    // 删除
    async delete(id) {
      const { status, msg } = await this.$http.message.guideApi.delete(id)
      if (status === 200) {
        this.$message.success('已删除！')
        if (this.dataSource.length == 1 && this.listQuery.pageNo > 1) {
          this.listQuery.pageNo--
        }
        this.getList()
      } else {
        this.$message.error(msg)
      }
    },
    // 更新启用状态-启用
    async updateStatusShow(id) {
      const { status, msg } = await this.$http.message.guideApi.show(id)
      if (status === 200) {
        this.$message.success('已启用')
        this.getList()
      } else {
        this.$message.error(msg)
      }
    },
    // 更新启用状态-隐藏
    async updateStatusHide(id) {
      const { status, msg } = await this.$http.message.guideApi.hide(id)
      if (status === 200) {
        this.$message.success('已隐藏')
        this.getList()
      } else {
        this.$message.error(msg)
      }
    },
    edit(id) {
      this.$router.push({
        name: 'EditGuide',
        query: { id, type: 'update' }
      })
    },
    copyCode(jumpUrl) {
      let clipboard = new Clipboard('.copy-text', {
        text: () => {
          return jumpUrl
        }
      })
      clipboard.on('success', () => {
        this.$message.success('复制成功')
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', () => {
        // 不支持复制
        this.$message.error('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
      })
    }
  }
}
</script>

<style lang="scss">
.copy-text {
  display: inline-block;
  width: 40px;
  height: 20px;
  line-height: 20px;
  cursor: pointer;
  border: 1px solid #409eff;
  color: #409eff;
  margin-left: 10px;
  border-radius: 2px;
  font-size: 12px;
}
</style>
